<template>
  <div class="qf-model" v-if="visible">
    <div class="marsk">
      <div class="wrap">
        <slot name="title">
          <h2>提示信息</h2>
        </slot>
        <slot name="body">
          <div class="body">确定要需要吗？</div>
        </slot>
        <div class="wrap__button">
          <button @click="$emit('confirm')" class="modal__button--confirm">
            确认
          </button>
          <button @click="$emit('cancel')" class="modal__button--cancel">
            取消
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
};
</script>
<style scoped>
/* scoped属性用于模块化css 只作用在当前组件*/
.marsk {
  position: fixed;
  background: rgba(0, 0, 0, 0.3);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrap {
  width: 350px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 10px;
}
.wrap div {
  margin: 15px 0;
}

.modal__button--confirm {
  margin: 0 5px;
  outline: none;
  border: 0;
  width: 100px;
  height: 30px;
  background: linear-gradient(90deg, #1596fb, #002dff);
  border-radius: 0.28571429rem;
  display: block;
  color: #fff;
  cursor: pointer;
}
.modal__button--cancel {
  outline: none;
  border: 0;
  width: 100px;
  height: 30px;
  background: linear-gradient(90deg, #fb7d15, hsl(332, 100%, 50%));
  border-radius: 0.28571429rem;
  display: block;
  color: #fff;
  cursor: pointer;
}
.wrap__button {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
